<!DOCTYPE html>
<html xmlns:c="http://www.w3.org/1999/html">
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <base id="base" href="${basePath}">
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"  />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <script src="js/jquery.js"></script>
    <script src="js/plugs/echarts/echarts.min.js"></script>
    <script src="js/avalon.js"></script>

    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/footer.css"/>
    <link rel="stylesheet" type="text/css" href="css/header2.css"/>
    <link rel="stylesheet" type="text/css" href="css/detail.css"/>
    <link rel="stylesheet" type="text/css" href="css/jindutiao.css"/>
</head>
<style type="text/css">
    .mtk{
        width: 100%;
        height: 100%;
        margin: auto;
        display:none;
        z-index: 1;
    }
    .mtk img{
        width:80%;
        position: fixed;
        left: 10%;
        top: 33%;
    }
    .mtk h2{
        position: fixed;
        right:14%;
        top:32%;
        z-index: 3;
        color: #999;
    }
    .kxian{
        width: 100%;
        height: 50%;
    }
    .guanbi{
        position: absolute;
        top: -20px;
        right: 10px;
    }
</style>

<body ms-controller="root">
<input type="hidden"  id="code" value="${code}">
        <#include "fragment/header2.html">
<div class="section01 w100">
    <div class="sec_top hidden w100" style="padding: 8px 0px 10px 0px;">
        <div class="top_child1 w40 fl" style="padding: 0px 26px;">
            <div class="colorGreen f35" id="new_price">${pro_data.last_price}</div>
            <div class="colorGreen f12"><span class="inline_block mr10" id="change_val">${pro_data.change_count}</span><span id="change_point">${pro_data.change_count}%</span></div>
        </div>
        <div class="top_child2 w60 fl hidden color999 f12">
            <div class="w50 fl">
                <div>最高<span class="inline_block ml10 colorGreen" id="high">${pro_data.high}</span></div>
                <div class="mt6">最低<span class="inline_block ml10 colorGreen" id="low">${pro_data.low}</span></div>
                <div class="mt6">波动<span class="inline_block ml10 color_ef" id="change_val">${pro_data.change_count}</span></div>
            </div>
            <div class="w50 fl">
                <div>今开<span class="inline_block ml10 colorGreen" id="open">${pro_data.open}</span></div>
                <div class="mt6">昨收<span class="inline_block ml10 color_ef" id="close">${pro_data.close}</span></div>
                <div class="mt6">涨速<span class="inline_block ml10 color_ef" id="change_v">21</span></div>
            </div>
        </div>
    </div>
    <!--<div class="sec_bottom w100 fl">-->
</div>
<div class="inp">
    <input type="text" id="aa" value="" disabled="disabled"/>
    交易量
    <input type="text" id="bb" value="" disabled="disabled"/>
</div>
<div class="num">
    <div id="num1">
        50.00%
    </div>
    <div id="num2">
        <div style="float: right;">50.00%</div>
    </div>
</div>

<div class="detail_list borderbox" style="margin-bottom:50px;">
    <div class="detail_type f14 mt10 mb15">
        <span class="color999" ms-class-guize="mingxi==1" ms-click="switchMin(1)">明细</span>
        <span class="color999 ml10" ms-class-guize="mingxi==2" ms-click="switchMin(2)">规则</span>
    </div>
    <div ms-visible="mingxi==1">
        <div class="detail_title hidden f12 color999 mb15">
            <div class="w40 fl">时间</div>
            <div class="w30 fl tr">价位</div>
            <div class="w30 fl tc">现手</div>
        </div>
        <div class="detail_title hidden f12 mb10">
            <div class="w40 fl color_ef">16:02:42</div>
            <div class="w30 fl tr">7582</div>
            <div class="w30 fl tc">55</div>
        </div>
        <div class="detail_title hidden f12 mb10">
            <div class="w40 fl color_ef">14:33:55</div>
            <div class="w30 fl tr">3341</div>
            <div class="w30 fl tc">42</div>
        </div>
        <div class="detail_title hidden f12 mb10">
            <div class="w40 fl color_ef">07:25:35</div>
            <div class="w30 fl tr">9823</div>
            <div class="w30 fl tc">61</div>
        </div>
        <div class="detail_title hidden f12 mb10">
            <div class="w40 fl color_ef">10:16:19</div>
            <div class="w30 fl tr">4261</div>
            <div class="w30 fl tc">87</div>
        </div>
        <div class="detail_title hidden f12 mb10">
            <div class="w40 fl color_ef">09:31:56</div>
            <div class="w30 fl tr">5971</div>
            <div class="w30 fl tc">72</div>
        </div>
        <div class="detail_title hidden f12 mb10">
            <div class="w40 fl color_ef">06:15:53</div>
            <div class="w30 fl tr">1762</div>
            <div class="w30 fl tc">89</div>
        </div>
    </div>

    <div ms-visible="mingxi==2">
        <div class="tableguize f14 fir_span">
            <span class="w25 inline_block tc ta_span">货币单位</span>
            <span class="w70 inline_block tc">${rule.monetaryunit}</span>
        </div>
        <div class="tableguize f14">
            <span class="w25 inline_block tc ta_span">交易单位</span>
            <span class="w70 inline_block tc">${rule.tradingunit}</span>
        </div>
        <div class="tableguize f14">
            <span class="w25 inline_block tc ta_span">交易所</span>
            <span class="w70 inline_block tc">${rule.exchange}</span>
        </div>
        <div class="tableguize f14">
            <span class="w25 inline_block tc ta_span">最小波动</span>
            <span class="w70 inline_block tc">${rule.minimumfluctuation}</span>
        </div>
        <div class="tableguize f14">
            <span class="w25 inline_block tc ta_span">浮动盈亏</span>
            <span class="w70 inline_block tc">${rule.Fluctuatingprofitandloss}</span>
        </div>
        <div class="tableguize f14">
            <span class="w25 inline_block tc ta_span">履约保证金</span>
            <span class="w70 inline_block tc">${rule.performancebond}</span>
        </div>
        <div class="tableguize f14">
            <span class="w25 inline_block tc ta_span">交易时间</span>
            <span class="w70 inline_block tc">${rule.tradingtime}</span>
        </div>
        <div class="tableguize f14">
            <span class="w25 inline_block tc ta_span">清仓时间</span>
            <span class="w70 inline_block tc">${rule.clearingtime}</span>
        </div>
        <div class="tableguize f14">
            <span class="w25 inline_block tc ta_span">综合交易费</span>
            <span class="w70 inline_block tc">${rule.comprehensivefee}</span>
        </div>
        <div class="tableguize f14">
            <span class="w25 inline_block tc ta_span">汇率</span>
            <span class="w70 inline_block tc">${rule.exchangerate}</span>
        </div>
        <div class="que">
            <div class="que_title f15"><i class="inline_block ora fl"></i>美元如何兑换成人民币？</div>
            <div class="que_con f12">用户交易涉及到美元兑换人民币将使用固定汇率7进行兑换即1美元=7人民币。（实际兑换汇率波动到一定的点位会进行调整将另行公布），用户持仓结算后的盈亏将自动根据上述汇率换成人民币。</div>
        </div>
        <div class="que">
            <div class="que_title f15"><i class="inline_block ora fl"></i>什么是买涨？</div>
            <div class="que_con f12">当您买涨时，价格涨了你就赚钱，跌了亏钱。</div>
        </div>
        <div class="que">
            <div class="que_title f15"><i class="inline_block ora fl"></i>什么是买跌？</div>
            <div class="que_con f12">当您买跌时，价格跌了你就赚钱，涨了亏钱。</div>
        </div>
        <div class="que">
            <div class="que_title f15"><i class="inline_block ora fl"></i>什么是止盈？</div>
            <div class="que_con f12">
                当单笔交易盈利金额触发（大于等于）指定的止盈金额时，该笔交易会被强制平仓。
                由于市场的价格实时都在变动，不保证平仓后最终盈利金额一定大于等于止盈金额，有可能小于触发的止盈金额。
            </div>
        </div>
        <div class="que">
            <div class="que_title f15"><i class="inline_block ora fl"></i>什么是止损？</div>
            <div class="que_con f12">
                当单笔交易亏损金额触发（大于等于）指定的止损金额时，该笔交易会被强制平仓。
                由于市场的价格实时都在变动，不保证卖出后最终亏损金额一定小于等于止损金额，有可能大于止损金额。
                遇到极端剧烈行情，亏损金额有可能大幅超出止损金额，超出部分由客户承担。
            </div>
        </div>
        <div class="que">
            <div class="que_title f15"><i class="inline_block ora fl"></i>什么是持仓时间？</div>
            <div class="que_con f12">
                持仓时间是指交易中的期货产品该交易日的最后的持仓时间，当持仓时间到点后，持仓中的交易会被强制平仓，不保证成交价格，请务必在到期前自己选择卖出。节假日或休市随市场实际执行。
            </div>
        </div>
        <div class="que">
            <div class="que_title f15"><i class="inline_block ora fl"></i>什么是交易综合费？</div>
            <div class="que_con f12">
                期货交易的综合费由买入费用、卖出费用构成，根据不同的交易品种，单笔买卖费用有一定的差异。
            </div>
        </div>
    </div>
    <div class="detail_datas"></div>
</div>

<div class="foot w100" style="position: fixed;bottom: 0px;left: 0px;" id="mai">
    <div class="w20 fl bgcolor_gre h100">
        <div class="fast_buy bgBox" ms-class-iconfocus="fastfoc" ms-click="Fastfoc"></div>
        <div class="f10 tc">闪电交易</div>
    </div>
    <div class="w40 fl buy_btn tc bgcolor_red f18" ms-click="buy">{{!fastfoc?"买涨":"闪电买涨"}}</div>
    <div class="w40 fl buy_btn tc bgcolor_blu f18" ms-click="buy">{{!fastfoc?"买跌":"闪电买跌"}}</div>
</div>
<!--购买弹出框-->
<div class="order w100 color666 borderbox" ms-visible="tubuy" id="yincang" >
    <h2 class="guanbi" id="guanbi">x</h2>
    <div class="pro_item f10 borderbox">
        <div>14:29自动平仓，涨10个点，赚10港币</div>
        <div class="mt5">当前汇率：1港币=0.90人民币</div>
    </div>
    <div class="pro_price f12 borderbox">
        <div>开仓价<span class="inline_block color_ef fr">34644</span></div>
    </div>
    <div class="pro_count">
        <div class="order_count hidden mb15">
            <div class="w30 fl">交易数量</div>
            <div class="w70 fl hidden tc">
                <div class="count_btn ml10 fr" ms-class-hand="hand==5" ms-click="switchhand(5)">10手</div>
                <div class="count_btn ml10 fr" ms-class-hand="hand==4" ms-click="switchhand(4)">5手</div>
                <div class="count_btn ml10 fr" ms-class-hand="hand==3" ms-click="switchhand(3)">3手</div>
                <div class="count_btn ml10 fr" ms-class-hand="hand==2" ms-click="switchhand(2)">2手</div>
                <div class="count_btn fr" ms-class-hand="hand==1" ms-click="switchhand(1)">1手</div>
            </div>
        </div>
        <div class="pro_point hidden f12">
            <div class="w50 fl point_left">
                <div>触发止损点数
                    <span class="que_icon inline_block tc" id="icon1">?</span>
                    <div id="a1" class="absolute mtk">
                        <img src="../img/smschufazhisundianshu.png"/>
                        <h2 id="b1">x</h2>
                    </div>
                    <select class="choose">
                        <option value="volvo">10</option>
                        <option value="saab">20</option>
                        <option value="opel">30</option>
                    </select>
                </div>
                <div>触发止盈点数
                    <span class="que_icon inline_block tc" id="icon2">?</span>
                    <div id="a2" class="absolute mtk">
                        <img src="../img/wenhao2@2x.png"/>
                        <h2 id="b2">x</h2>
                    </div>
                    <span class="set_po inline_block">
									<input class="point_input" type="number" maxlength="2" ms-duplex-string="price1"/>
								</span>
                </div>
            </div>
            <div class="w50 fl borderbox point_right">
                <div>触发止损金额
                    <span class="que_icon inline_block tc" id="icon3">?</span>
                    <div id="a3" class="absolute mtk">
                        <img src="../img/wsmszzhisundianshu.png"/>
                        <h2 id="b3">x</h2>
                    </div>
                    <span class="colorGreen f12">-270.0</span>
                </div>
                <div>触发止盈金额
                    <span class="que_icon inline_block tc" id="icon4">?</span>
                    <div id="a4" class="absolute mtk">
                        <img src="../img/wenhao3@2x.png"/>
                        <h2 id="b4">x</h2>
                    </div>
                    <span class="set_po inline_block">
									<input class="point_input" type="number" maxlength="2" ms-duplex-string="price2"/>
								</span>
                </div>
            </div>
        </div>
        <div class="foc">
            <span class="foc_choose inline_block" ms-class-focu="isfocu" ms-click="ChooseFocu"></span>
            <span class="inline_block mr20">触发止盈</span>
            <span class="foc_choose inline_block" ms-class-focu="isfoc" ms-click="ChooseFoc"></span>
            <span class="inline_block">不触发止盈</span>
        </div>
        <div class="cover">
            <span class="foc_choose inline_block tc" ms-class-focu="isbaoben" ms-click="ChooseBao">√</span>
            <span class="inline_block">移动保本</span>
            <span class="que_icon inline_block tc" id="icon5">?</span>
            <div id="a5" class="absolute mtk">
                <img src="../img/wenhao4@2x.png"/>
                <h2 id="b5">x</h2>
            </div>
            <span class="inline_block">移动点数</span>
            <span class="set_po inline_block mr10">
							<input class="point_input" type="number" maxlength="2" ms-duplex-string="usermobile"/>
						</span>
            <span class="inline_block">保本点数</span>
            <span class="set_po inline_block">
							<input class="point_input" type="number" maxlength="2" ms-duplex-string="usermobile"/>
						</span>
        </div>
        <div class="balance">
            <span class="inline_block mr10">当前余额</span>
            <span class="f12 colororange">1.00元</span>
            <span class="inline_block fr recharge f12">去充值</span>
        </div>
        <div class="total f12">
            <span class="color_ef">交易费用80.0+保证金650.0=</span>
            <span class="colorred">合计730.0</span>
            <div class="btnBox mt30">
                <div class="bgcolor_ora color_ef br5 tc" ms-click="topay">确定买涨</div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/trades/product_detail.js"></script>
<script type="text/javascript" src="js/date_format.js" language="javascript"></script>
<script type="text/javascript">
    var open=-1;
    var layer_pay;
    $(function () {
        toLoadView(0);

        $('.sec_chil').click(function(){
            var data=$(this).attr('data');
            toLoadView(data);
        });

        $('#timeban').on('click','.tb01',function(){
            var data=$(this).attr('data');
            toLoadView(data);
        });

        $("#guanbi").click(function(){
            $("#yincang").hide();
        });

//		上左
        $("#b1").click(function(){
            $("#a1").hide();
        });

        $("#icon1").click(function(){
            $("#a1").show();
        });


//		上右
        $("#b2").click(function(){
            $("#a2").hide();
        });

        $("#icon2").click(function(){
            $("#a2").show();
        });



//		下左
        $("#b3").click(function(){
            $("#a3").hide();
        });

        $("#icon3").click(function(){
            $("#a3").show();
        });


//		下右
        $("#b4").click(function(){
            $("#a4").hide();
        });

        $("#icon4").click(function(){
            $("#a4").show();
        });


//		最后一个
        $("#b5").click(function(){
            $("#a5").hide();
        });

        $("#icon5").click(function(){
            $("#a5").show();
        });


        // //下单弹出
        // $('.buy_btn').click(function(){
        //     var data=$(this).attr('data');
        //     var dom=$('#tubuy').html();
        //
        //     if(open<0){
        //         open=1;
        //         //$('#tubuy').show();
        //         open_dialog(dom);
        // }else {
        //         open=-1;
        //         //$('#tubuy').hide();
        //         layer.closeAll();
        // }
        //
        // });

        // function open_dialog(dom){
        //     layer.open({
        //         type: 1,
        //         anim: 'scale',
        //         //btn: ['确定买涨', '取消'],
        //         shade: 'background-color: rgba(0,0,0,.3)',//遮罩层
        //         closeBtn: 1, //不显示关闭按钮
        //         fixed: true,
        //         move: false,//拖拽
        //         top : '100px',
        //         area: ['300px', '400px'],
        //         shadeClose: true,//不允许点击遮罩关闭
        //         content:dom,//这里content是一个DOM
        //         style: 'width:80%;',
        //         yes:function(index){
        //             layer_pay=index;
        //
        //             if(!orderSubmit){
        //                 orderSubmit=true;
        //
        //             }
        //         },
        //         no:function(index){
        //             open=-1;
        //         }
        //     });
        // }
    });
</script>
</body>
</html>